<template>
  <div class="content">
    <van-empty style=" position: absolute;top:200px; left:30%;" v-if="!token" description="请先去登录" />
    <van-empty
      v-else-if="List.length==0" style="position: absolute;top:200px; left:10%;"
      description="购物车空空如也,去挑选喜欢的东西吧"
    />
    <div v-else>
      <van-nav-bar
        title="购物车"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <span @click="onClickRight" ref="bian">编辑</span>
        </template>
      </van-nav-bar>
      <div class="box">
        <van-checkbox-group v-model="result" ref="checkboxGroup" v-if="List">
          <div class="test" v-for="(item, index) in List" :key="index">
            <div class="left">
              <van-checkbox @click="ckn" :name="item.cartId"></van-checkbox>
            </div>
            <div class="right">
              <img :src="item.imgUrl" alt="" />
              <div class="da">
                <span style="font-size: 16px">{{ item.masterName }}</span>
                <div class="bottom">
                  <span style="color: #b91717; font-size: 15px"
                    >￥{{ item.price / 100 }}</span
                  >
                  <span class="anniu">
                    <span v-if="edit">
                      <van-stepper
                        v-model="item.buyNum"
                        integer
                        @click="updateBuyNum(item)"
                      />
                    </span>
                    <span class="opt2" v-else> x{{ item.buyNum }}</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>

      <div class="xia">
        <div class="left">
          <van-checkbox :value="checked" @click="checkAll"></van-checkbox>
          <span>全选</span>
        </div>
        <div class="body">
          <span>合计:￥</span>
          <span style="font-size: 20px; color: #c03131">{{ total / 100 }}</span>
        </div>
        <div class="bottom">
          <input
            type="button"
            v-if="edit"
            value="结算"
            ref="jie"
            @click="del"
          />
          <input type="button" v-else value="结算" ref="jie" @click="submit" />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import $axios from "../../api/request";
import Footer from "../../components/Footer.vue";
import {mapState} from 'vuex'
export default {
  components: {
    Footer,
  },
  
  data() {
    return {
      edit: false,
      List: [],
      checked: false,
      value: 1,
      result: [],
      preOrderId: {},
    };
  },
  computed: {
    total() {
      let obj = this.List.filter((item) => this.result.includes(item.cartId));
      let num = 0;
      obj.forEach((item) => {
        let set = item.price * item.buyNum;
        num += set;
      });
      return num;
    },
    ...mapState(['token'])
  },
  created() {
    this.getList();
  },
  methods: {
    //返回主页
    onClickLeft() {
      history.back();
    },
    //编辑结算
    onClickRight() {
      this.edit = !this.edit;
      if (this.edit) {
        this.$refs.bian.innerText = "完成";
        this.$refs.jie.value = "删除";
      } else {
        this.$refs.bian.innerText = "编辑";
        this.$refs.jie.value = "结算";
        this.updateBuyNum();
      }
    },
    jiesuan() {
      if (!this.result == "") {
        this.$router.push("/order");
      }
    },
    async getList() {
      try {
        let res = await $axios.get("http://zl.huruqing.cn:3003/cart/all");
        this.List = res.list;
      } catch (error) {}
    },
    //更新购物车数量
    async updateBuyNum() {
      try {
        this.List.forEach((item) => {
          let res = $axios
            .get(
              "http://zl.huruqing.cn:3003/cart/updateNum?cartId=" +
                item.cartId +
                "&buyNum=" +
                item.buyNum
            )
            .then((res) => console.log(res));
        });
      } catch (error) {
        console.log(error);
      }
    },
    checkAll() {
      this.checked = !this.checked;
      this.$refs.checkboxGroup.toggleAll(this.checked);
    },
    ckn() {
      if (this.result.length == this.List.length && this.List.length > 0) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    del() {
      let obj2 = [this.result];
      if (this.edit) {
        $axios
          .post("http://zl.huruqing.cn:3003/cart/del?cartId=" + [obj2])
          .then((res) => {
            let obj = this.List.filter(
              (item) => !this.result.includes(item.cartId)
            );
            this.result = [];
            this.List = obj;
          })
          .catch((error) => console.log(error));
      }
    },
    submit() {
      if (this.result != "") {
        let obj3 = {
          totalMoney: this.total,
          cartId: this.result,
        };
        $axios
          .post("http://zl.huruqing.cn:3003/preOrder/create", obj3)
          .then((res) => {
            this.preOrderId = res.result.preOrderId;

            this.$router.push({
              path: `/order`,
              query: { preOrderId: this.preOrderId, total: this.total },
            });
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./cart.scss";
</style>
<style lang="scss">
.van-nav-bar__content {
  background: #fff;
  .van-nav-bar__left i {
    color: #c31313;
  }
  .van-nav-bar__text {
    color: #c31313;
  }
   .custom-image .van-empty__image {
      // margin-top: 200px;
    width: 90px;
    height: 90px;
  }
}
</style>
